<template>
	<el-radio-group v-model="template" :aria-hidden="false" class="template_radio_wrapper">
		<el-radio v-for="(item, index) in siteTempOptions" :key="index" :label="item.value" aria-hidden="false">
			<el-button icon="el-icon-search" plain @click="handlePreviewImage(index)"></el-button>
			<el-image ref="image" :src="item.imgUrl" fit="fill" :preview-src-list="[item.imgUrl]"></el-image>
			<h4>{{ item.label }}</h4>
		</el-radio>
	</el-radio-group>
</template>

<script>
import { mapGetters } from 'vuex';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: String, default: '' }
	},
	data() {
		return {
			showViewer: false,
			template: this.value,
			imgUrl: ''
		};
	},
	computed: {
		...mapGetters(['siteConfig']),
		siteTempOptions() {
			let siteConfig = this.siteConfig.find((n) => n.filed13 === 'SITE_TEMPLATE');
			let siteTempOptions = this.$isJSON(siteConfig.filed22) ? JSON.parse(siteConfig.filed22) : [];
			return siteTempOptions.map((n) => ({ ...n, imgUrl: window.staticPath + n.img }));
		}
	},
	watch: {
		value(val) {
			this.template = val;
		},
		template(val) {
			this.$emit('input', val);
			this.dispatch('ElFormItem', 'el.form.change', [val]);
		}
	},
	methods: {
		handlePreviewImage(index) {
			this.$refs['image'][index].clickHandler();
		}
	}
};
</script>

<style lang="scss" scoped>
.template_radio_wrapper::v-deep {
	width: calc(100% + 16px);
	margin: 0 -8px;
	.el-radio {
		position: relative;
		float: left;
		width: 33.3333%;
		overflow: hidden;
		padding: 0 8px;
		margin: 0 0 16px;
		box-sizing: border-box;
		&:hover .el-button {
			display: block;
		}
	}
	.el-radio__input {
		position: absolute;
		left: 8px;
		bottom: 5px;
		font-size: 0;
	}
	.el-radio__label {
		display: flex;
		flex-direction: column;
		padding: 0;
		margin: 0;
		width: 100%;
		&::before {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 30px;
			left: 0;
			content: '';
			z-index: 9;
		}
		h4 {
			height: 24px;
			line-height: 24px;
			flex-shrink: 0;
			padding-left: 20px;
			margin-top: 6px;
		}
	}
	.el-image {
		padding-top: 120%;
		overflow: hidden;
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}
	}
	.el-button {
		position: absolute;
		top: 0;
		right: 8px;
		z-index: 10;
		padding: 5px;
		border-radius: 0;
		display: none;
	}
}
</style>
